@use "../../assets/scss/mixins/figure/texture" as mx;
html {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
  &:before,
  &:after {
    box-sizing: inherit;
  }
}
body {
  // min-height: 100vh;
  display: grid;
  place-content: center;
  grid-auto-flow: row;
  gap: 30px;
  background: linear-gradient(135deg, #d1f2a5, #f56991);
}

@property --_x {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

figure {
  --w: 280px;
  --r: 0.5em;

  --g: conic-gradient(
    from 90deg at calc(100% - var(--r)) calc(100% - var(--r)),
    #0000 25%,
    #000 0
  );
  --d: calc(0.5lh + var(--r));

  display: grid;
  place-items: end end;
  font: bold 40px/1.5 monospace;
  cursor: pointer;
  transition: --_x 0.5s;
  &.alt {
    place-items: end start;
    img {
      --g: conic-gradient(
        from 180deg at var(--r) calc(100% - var(--r)),
        #0000 25%,
        #000 0
      );
      --_m: calc(2 * var(--r)) calc(2 * var(--r))
        radial-gradient(#000 69%, #0000 72%);
      mask: calc(var(--d) + var(--_x)) 100% / var(--_m),
        0% calc(100% - var(--d)) / var(--_m),
        radial-gradient(0.5lh at 0 100%, #0000 99%, #000 calc(100% + 1px))
          calc(var(--r) + var(--_x)) calc(-1 * var(--r)),
        var(--g) calc(var(--d) + var(--_x)) 0, var(--g) 0 calc(-1 * var(--d));
      mask-repeat: no-repeat;
    }
    figcaption {
      transform: translate(calc(-0.5lh + var(--r)) calc(0.5lh - var(--r)));
    }
  }
  * {
    grid-area: 1 / 1;
  }
  &:hover {
    --_x: calc(var(--w) - 3 * var(--r) - 0.5lh);
  }
  img {
    --_m: calc(2 * var(--r)) calc(2 * var(--r))
      radial-gradient(#000 69%, #0000 72%);
    width: var(--w);
    aspect-ratio: 1;
    border-radius: var(--r);
    mask: calc(100% - var(--d) - var(--_x)) 100% / var(--_m),
      100% calc(100% - var(--d)) / var(--_m),
      radial-gradient(0.5lh at 100% 100%, #0000 99%, #000 calc(100% + 1px))
        calc(-1 * var(--r) - var(--_x)) calc(-1 * var(--r)),
      var(--g) calc(-1 * var(--d) - var(--_x)) 0, var(--g) 0 calc(-1 * var(--d));
    mask-repeat: no-repeat;
  }
  figcaption {
    height: 1lh;
    width: calc(1lh + var(--_x));
    text-align: center;
    letter-spacing: 1px;
    overflow: hidden;
    color: #fff;
    background: #bf4d28;
    transform: translate(calc(0.5lh - var(--r)) calc(0.5lh - var(--r)));
    border-inline: calc(0.5lh - 0.5ch) solid #0000;
    clip-path: inset(5px round 1lh);
  }
}
.brick {
  width: 300px;
  height: 500px;
  @include mx.brick;
}

.head {
  @include mx.semiTransparentDot;
}

.bar {
  @include mx.scrollBar;
}

/* HTML: <div class="loader"></div> */
// .loader {
//   width: 70px;
//   height: 40px;
//   outline: 2px solid #fff;
//   background: radial-gradient(farthest-side, red 90%, #0000) 0 0/8px 8px
//       no-repeat,
//     radial-gradient(farthest-side, #000 90%, #0000) 0 0/8px 8px no-repeat,
//     linear-gradient(#fff 0 0) 50%/10px 100% no-repeat,
//     conic-gradient(from 90deg at 10px 10px, #0000 90deg, #fff 0),
//     conic-gradient(from -90deg at 60px 30px, #0000 90deg, #fff 0);
//   animation: l9 2s infinite;
// }
// @keyframes l9 {
//   0% {
//     background-position: 50% 100%, 0 0, 50%;
//   }
//   12.5% {
//     background-position: 0 100%, 50% 0, 50%;
//   }
//   25% {
//     background-position: 0 0, 50% 100%, 50%;
//   }
//   37.5% {
//     background-position: 50% 0, 100% 100%, 50%;
//   }
//   50% {
//     background-position: 50% 100%, 100% 0, 50%;
//   }
//   62.5% {
//     background-position: 100% 100%, 50% 0, 50%;
//   }
//   75% {
//     background-position: 100% 0, 50% 100%, 50%;
//   }
//   82.5% {
//     background-position: 50% 0, 0 100%, 50%;
//   }
//   100% {
//     background-position: 50% 100%, 0 0, 50%;
//   }
// }

/* HTML: <div class="loader"></div> */
.loader {
  height: 30px;
  aspect-ratio: 6;
  --c: #0000 64%, #000 66% 98%, #0000 101%;
  background: radial-gradient(35% 146% at 50% 159%, var(--c)) 0 0,
    radial-gradient(35% 146% at 50% -59%, var(--c)) 25% 100%;
  background-size: calc(100% / 3) 50%;
  background-repeat: repeat-x;
  animation: l1 1s infinite linear;
}
@keyframes l1 {
  to {
    background-position: 50% 0, 75% 100%;
  }
}
